<template>
    <div class="app-container">
        <!-- 搜索框 -->
        <div>
            <el-input v-model="pageForm.val" placeholder="请输入菜谱名" style="width:20%"></el-input>
            <el-button type="primary" style="margin-left:0.3%" @click="searchMenu">搜索</el-button>
        </div>
        <!-- 表格 -->
        <div>
            <el-table :data="handledMenus" border fit highlight-current-row>
                <el-table-column label="编号" prop="_id"></el-table-column>
                <el-table-column label="菜谱名" prop="name"></el-table-column>
                <el-table-column label="收藏数" prop="collections"></el-table-column>
                <el-table-column label="是否推荐" prop="isRecommend"></el-table-column>
                <el-table-column label="特点">
                    <template slot-scope="scope">
                        <el-tooltip effect="dark" placement="top-start">
                            <div slot="content" v-html="scope.row.classtips"></div>
                            <el-button type="success" icon="el-icon-check"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="是否免费" prop="isFree"></el-table-column>
                <el-table-column label="是否热门" prop="isHot"></el-table-column>
                <el-table-column label="展示图">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.coverpic" fit="cover"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="制作时间" prop="needtime"></el-table-column>
                <el-table-column label="材料">
                    <template slot-scope="scope">
                        <el-tooltip effect="dark" placement="top-start">
                            <div slot="content" v-html="scope.row.ingredient"></div>
                            <el-button type="success" icon="el-icon-view"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="制作流程" prop="method">
                    <template slot-scope="scope">
                        <el-button @click="currentMethod=scope.row.method;isShowMethodDialog=true">查看</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="updete(scope.row)">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页 -->
        <div>
            <el-pagination :current-page="pageForm.currentPage" :page-sizes="[10, 20, 50, 100]"
                :page-size="pageForm.pageSize" layout="total, sizes, prev, pager, next, jumper"
                @size-change="changeSize" @current-change="changeCurrent" @prev-click="prev" @next-click="next"
                :total="pageForm.total">
            </el-pagination>
        </div>
        <el-dialog :visible.sync="isShowMethodDialog">
            <div v-for="(item, i) in currentMethod">
                <span>{{i + 1}}. {{item.describe}}</span><br />
                <el-image :src="item.img" fit="cover" style="width: 500px;height: 500px;"></el-image>
            </div>
        </el-dialog>
        <el-dialog title="编辑菜谱信息" :visible.sync="openDialog">
            <el-form v-model="form">
                <el-form-item label="菜品名">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="制作时间">
                    <el-input v-model="form.needtime"></el-input>
                </el-form-item>
                <el-form-item label="是否免费">
                    <el-radio v-model="form.isFree" label="Y">Y</el-radio>
                    <el-radio v-model="form.isFree" label="N">N</el-radio>
                </el-form-item>
                <el-form-item label="是否热门">
                    <el-radio v-model="form.isHot" label="Y">Y</el-radio>
                    <el-radio v-model="form.isHot" label="N">N</el-radio>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="openDialog = false">取 消</el-button>
                <el-button type="primary" @click="yes">确定修改</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { _pageMenus, _searchMenu,_updateMenu } from '@/api/menu'
export default {
    name: 'MenuList',
    data() {
        return {
            //表格内容
            menus: [],
            // 分页参数
            pageForm: {
                currentPage: 1,
                pageSize: 10,
                total: 0,
                val:""
            },
            isShowMethodDialog: false,
            currentMethod: [],
            openDialog: false,
            form: {
                _id:"",
                name: "",
                needtime: "",
                isFree: "Y",
                isHot: "Y"
            },
        }
    },
    mounted() {
        this.pageMenus();
    },
    computed: {
        handledMenus() {
            return this.menus.map(item => {
                item.classtips = this.listIfyItems(item.classtips);
                item.ingredient = this.listIfyItems(item.ingredient, e => `${e.name}---${e.number}`);
                return item
            })

        }
    },
    methods: {
        //分页查询所有菜单，无搜索
        async pageMenus() {
            const { total, menus } = await _pageMenus(this.pageForm)
            if (total && menus) {
                this.menus = menus;
                this.pageForm.total = total;
            }
        },
        /**
        * 将数组处理为
        * 1. item1
        * 2. item2
        */
        listIfyItems(arr, handler = e => e) {
            if (!arr) {
                return '';
            }
            return arr.reduce((pre, cur, i) => `${pre}${i + 1}. ${handler(cur)}<br/>`, '');
        },
        changeSize(size) {
            this.pageForm.pageSize = size;
            this.pageMenus()
        },
        changeCurrent(page) {
            this.pageForm.currentPage = page;
            this.pageMenus()
        },
        prev(page) {
            this.pageForm.currentPage--;
            this.pageMenus()
        },
        next(page) {
            this.pageForm.currentPage++;
            this.pageMenus()
        },
        async searchMenu() {
            const res = await _searchMenu(this.pageForm)
            this.menus = res.menus;
            this.pageForm.val=""
        },
        updete(item){
            this.form=item;
            this.openDialog=true
        },
        async yes(){
            this.openDialog = false;
            const res=await _updateMenu(this.form)
            if(res.meta.status==200){
                this.menus();
                this.$message.success("修改成功")
            }
        }
    },
}
</script>